import React, { Fragment } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Row,
  Col,
  Radio,
  Button,
  Alert,
  Modal,
  Tabs,
  Checkbox,
  message,
  Input,
  Select,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import { QuestionCircleOutlined } from '@ant-design/icons';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile, { urlParse } from '@/utils/utils';
import styles from './style.less';
import FooterToolbar from '@/components/FooterToolbar';
import StandardTable from '@/components/StandardTable';
import TaskProgress from '../../components/TaskProgress';

const FormItem = Form.Item;
const { confirm } = Modal;
const { TabPane } = Tabs;
const { Option } = Select;

@connect(({ customerbillcs, loading }) => ({
  customerbillcs,
  loading: loading.models.customerbillcs,
  selectMessage: customerbillcs.selectMessage,
  formFieldsValue: customerbillcs.formFieldsValue,
  isdefaultFlag: customerbillcs.isdefaultFlag,
  noBillData: customerbillcs.noBillData, // 其它列表数据
  onceBillData: customerbillcs.onceBillData, // 一次性列表数据
  wageGenerationData: customerbillcs.wageGenerationData, // 代发工资代报税列表数据
}))
class billingList extends React.Component {
  state = {
    nowPage: 1,
    pageNum: 10,
    selectedRowKeys: [],
    BILL_UN_CAUSE: [],
    modalVisible: false,
    cusName: null,
    noFic: 0,
    feeYm: null,
    submitLoading: false,
    tabpaneid: null,
    newTabs: null,
    selectedRows: [],
    contId: null,
  };

  // 组件dom渲染完成
  componentDidMount() {
    const { dispatch, location } = this.props;
    const { nowPage, pageNum } = this.state;
    // 清空数据
    dispatch({
      type: 'customerbillcs/clearData',
      payload: {},
    });
    // 获取字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['BILL_UN_CAUSE'],
      callback: res => {
        this.setState({
          BILL_UN_CAUSE: res.BILL_UN_CAUSE,
        });
      },
    });
    // 查找详情
    const { custId } = urlParse(decodeURI(location.search));
    const { billYm } = urlParse(decodeURI(location.search));
    const { tabpaneid } = urlParse(decodeURI(location.search));
    const { contId } = urlParse(decodeURI(location.search));
    this.setState(
      {
        cusName: custId,
        feeYm: billYm,
        tabpaneid,
        newTabs: '3',
        contId: contId === 'undefined' ? null : contId,
      },
      () => {
        this.getList(nowPage, pageNum, custId, billYm, '3', contId === 'undefined' ? null : contId);
      }
    );
  }

  componentWillUnmount() {
    // 清空一下数据
    const { dispatch } = this.props;
    // 清空选中的
    dispatch({
      type: 'customerbillcs/clearData',
      payload: {},
    });
    this.setState({
      selectedRows: [],
      selectedRowKeys: [],
    });
  }

  // 查看当前有无任务
  checkHasTask = () => {
    const { dispatch } = this.props;
    // 查看当前有无任务进行
    dispatch({
      type: 'customerbillcs/clearData',
      payload: {},
    });
  };

  // 进度弹框显隐
  handleProgressModalVisible = flag => {
    const { dispatch } = this.props;
    if (!flag) {
      dispatch({
        type: 'customerbillcs/updateModelData',
        payload: {
          showProgress: false,
        },
      });
    }
  };

  // 获取列表数据
  getList = (nowPage, pageNum, custId, billYm, tabid, contId) => {
    const { formFieldsValue, dispatch } = this.props;
    const { tabpaneid } = this.state;
    const pageArg = {
      currentPage: nowPage,
      pageSize: pageNum,
    };
    let pldata = {};
    if (String(formFieldsValue.defaultFlag) === '0') {
      pldata = {
        custId,
        billYm,
        contId,
        pageArg,
        creType: tabpaneid,
        cardNo: formFieldsValue.cardNo || null,
        empName: formFieldsValue.empId || null,
        fitFlag:
          String(formFieldsValue.defaultFlag) === '0'
            ? 0
            : Number(formFieldsValue.defaultFlag) || null,
      };
    } else if (String(formFieldsValue.defaultFlag) === '2') {
      pldata = {
        custId,
        billYm,
        pageArg,
        contId,
        creType: tabpaneid,
        fitFlag:
          String(formFieldsValue.defaultFlag) === '0'
            ? 0
            : Number(formFieldsValue.defaultFlag) || null,
        unnaturalCause: Number(formFieldsValue.unnaturalCause) || null,
        cardNo: formFieldsValue.cardNo || null,
        empName: formFieldsValue.empId || null,
      };
    } else {
      pldata = {
        custId,
        billYm,
        pageArg,
        contId,
        creType: tabpaneid,
        fitFlag:
          String(formFieldsValue.defaultFlag) === '0'
            ? 0
            : Number(formFieldsValue.defaultFlag) || null,
        cardNo: formFieldsValue.cardNo || null,
        empName: formFieldsValue.empId || null,
      };
    }
    const pldatas = { contId, custId, billYm, pageArg, creType: tabpaneid };
    if (+tabid === 2) {
      dispatch({
        type: 'customerbillcs/getOnceDetailData',
        payload: pldatas,
      });
    } else if (+tabid === 3) {
      dispatch({
        type: 'customerbillcs/getNoBillEnteredData',
        payload: pldata,
      });
    } else if (+tabid === 1) {
      dispatch({
        type: 'customerbillcs/getWageGenerationData',
        payload: pldatas,
      });
    }
  };

  // 符不符合
  changeTaxes = e => {
    this.setState({
      noFic: e.target.value,
    });
  };

  // 复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    if (selectedRowKeys.length > 100) {
      message.warning('勾选数据不能超过100条');
    } else {
      this.setState({ selectedRowKeys, selectedRows });
    }
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { cusName, feeYm, newTabs, contId } = this.state;
    this.getList(pagination.current, pagination.pageSize, cusName, feeYm, newTabs, contId);
  };

  // 列表搜索
  searchList = () => {
    const { form, dispatch } = this.props;
    const { cusName, feeYm, newTabs, contId } = this.state;
    form.validateFieldsAndScroll((err, values) => {
      const temp = values;
      if (!err) {
        if (!values.unnaturalCause) {
          temp.unnaturalCause = null;
        }
        dispatch({
          type: 'customerbillcs/updateModelData',
          payload: {
            formFieldsValue: temp,
          },
        });
        this.setState({ nowPage: 1, pageNum: 10, selectedRows: [], selectedRowKeys: [] }, () => {
          this.getList(1, 10, cusName, feeYm, newTabs, contId);
        });
      }
    });
  };

  // 关闭生成账单模态框
  closeModalVisible = () => {
    this.setState({ modalVisible: false });
  };

  // 生成账单
  submitData = () => {
    const { dispatch, form, selectMessage, formFieldsValue } = this.props;
    const { noFic, selectedRowKeys, cusName, feeYm, tabpaneid, contId } = this.state;
    const newSubData = [];
    selectedRowKeys.map(seitem => {
      const i = seitem.split('^');
      const iitem = {
        custId: i[0] === 'undefined' ? null : i[0], // 客户id
        defaultFlag: i[1] === 'undefined' ? null : i[1], // 是否符合
        empId: i[2] === 'undefined' ? null : i[2], // 员工
        feeYm: i[3] === 'undefined' ? null : i[3], // 年月
        unnaturalCause: i[4] === 'undefined' ? null : i[4], // 原因
      };
      newSubData.push(iitem);
      return true;
    });

    let generateData = null;
    let isSubmit = false;
    generateData = {
      custId: cusName,
      billYm: feeYm,
    };
    if (noFic === 1) {
      form.validateFieldsAndScroll(['incomPro'], err => {
        if (!err) {
          generateData = {
            ...generateData,
            defaultFlag: Number(formFieldsValue.defaultFlag),
            unnaturalCause: Number(formFieldsValue.unnaturalCause) || null,
            cardNo: formFieldsValue.cardNo || null,
            empName: formFieldsValue.empId || null,
          };
          isSubmit = true;
        }
      });
    } else {
      isSubmit = true;
    }
    generateData.condList = selectMessage;
    generateData.unnaturalCause = Number(formFieldsValue.unnaturalCause) || null;
    generateData.cardNo = formFieldsValue.cardNo || null;
    generateData.empName = formFieldsValue.empId || null;
    generateData.defaultFlag =
      String(formFieldsValue.defaultFlag) === '0' ? 0 : Number(formFieldsValue.defaultFlag) || null;
    const result = [];
    const obj = {};
    for (let i = 0; i < generateData.condList.length; i += 1) {
      if (!obj[generateData.condList[i].key]) {
        result.push(generateData.condList[i]);
        obj[generateData.condList[i].key] = true;
      }
    }
    generateData.condList = newSubData;
    generateData.contId = contId;

    if (isSubmit) {
      if (generateData.condList.length === 0) {
        confirm({
          icon: <QuestionCircleOutlined />,
          title: '温馨提示',
          content:
            '工资和一次性费用会全部生成；其它页签中不勾选数据时，将查询所有数据生成账单；勾选数据，只将勾选数据生成账单，是否确定生成账单？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            if (isSubmit) {
              this.setState({ submitLoading: true });
              dispatch({
                type: 'customerbillcs/uploadFileWithProgress',
                payload: { batchType: String(tabpaneid) === '1' ? 1 : 2, params: generateData },
              }).then(res => {
                if (res.success && res.data.taskCode && res.data.successProp !== 100) {
                  this.setState({ modalVisible: false, submitLoading: false });
                }
              });
            }
          },
        });
      } else {
        this.setState({ submitLoading: true });
        dispatch({
          type: 'customerbillcs/uploadFileWithProgress',
          payload: { batchType: String(tabpaneid) === '1' ? 1 : 2, params: generateData },
        }).then(res => {
          if (res.success && res.data.taskCode && res.data.successProp !== 100) {
            this.setState({ modalVisible: false, submitLoading: false });
          }
        });
      }
    }
  };

  // 查看详情
  toDetail = (e, record) => {
    e.preventDefault();
    router.push(encodeURI(`/chargemanage/customerbilling/detail?billId=${record.billId}`));
  };

  // 切换页签
  changeTabPane = e => {
    const { formFieldsValue, isdefaultFlag, form } = this.props;
    const { cusName, feeYm, tabpaneid, contId } = this.state;
    form.resetFields();
    this.setState({
      selectedRows: [],
      selectedRowKeys: [],
      newTabs: e,
    });
    const { dispatch } = this.props;
    if (formFieldsValue.defaultFlag === isdefaultFlag) {
      dispatch({
        type: 'customerbillcs/updateModelData',
        payload: { selectMessage: [] },
      });
    } else {
      dispatch({
        type: 'customerbillcs/updateModelData',
        payload: { selectMessage: [], isdefaultFlag: formFieldsValue.defaultFlag },
      });
    }
    dispatch({
      type: 'customerbillcs/updateModelData',
      payload: { selectMessage: [] },
    });
    const pageArg = {
      currentPage: 1,
      pageSize: 10,
    };
    const pldata = { custId: cusName, billYm: feeYm, pageArg, creType: tabpaneid, contId };
    if (+e === 2) {
      dispatch({
        type: 'customerbillcs/getOnceDetailData',
        payload: pldata,
      });
    } else if (+e === 3) {
      const pldatals = {
        custId: cusName,
        billYm: feeYm,
        fitFlag:
          String(formFieldsValue.defaultFlag) === '0'
            ? 0
            : Number(formFieldsValue.defaultFlag) || null,
        pageArg,
        creType: tabpaneid,
        cardNo: formFieldsValue.cardNo || null,
        empName: formFieldsValue.empId || null,
        unnaturalCause: Number(formFieldsValue.unnaturalCause) || null,
        contId,
      };
      dispatch({
        type: 'customerbillcs/getNoBillEnteredData',
        payload: pldatals,
      });
    } else if (+e === 1) {
      dispatch({
        type: 'customerbillcs/getWageGenerationData',
        payload: pldata,
      });
    }
  };

  handleSizeChange = e => {
    const { dispatch } = this.props;
    this.setState({});
    dispatch({
      type: 'customerbillcs/defaultFlagModelData',
      payload: { isdefaultFlag: e },
    });
  };

  // 返回
  goBack = () => {
    router.goBack();
  };

  // 导出
  export = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { formFieldsValue } = this.props;
    const { selectedRowKeys, selectedRows, cusName, feeYm, contId } = this.state;
    const newcondList = [];
    selectedRows.forEach(item => {
      newcondList.push({
        custId: item.custId || null,
        feeYm: item.feeYm || null,
        empId: item.empId || null,
        defaultFlag: item.defaultFlag || null,
        unnaturalCause: item.unnaturalCause || null,
      });
    });
    formFieldsValue.empName = formFieldsValue.empId || null;
    delete formFieldsValue.empId;
    const params = {
      custId: cusName,
      billYm: feeYm,
      contId,
      ...formFieldsValue,
      condList: !selectedRowKeys ? [] : newcondList,
    };
    downloadFile(params, '/csApi/csBill/exportNoBillDet', 'POST');
  };

  render() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      isdefaultFlag,
      noBillData,
      onceBillData,
      wageGenerationData,
      loading,
      customerbillcs,
    } = this.props;
    const {
      selectedRows,
      BILL_UN_CAUSE,
      selectedRowKeys,
      modalVisible,
      submitLoading,
      noFic,
    } = this.state;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },

      {
        title: '客户名称',
        dataIndex: 'custName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '是否垫付',
        dataIndex: 'isSpotName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人所得税',
        dataIndex: 'taxblAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '实发工资',
        dataIndex: 'realAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '工资年月',
        dataIndex: 'busiYm',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
    ];

    const columnsTwo = [
      {
        title: '客户名称',
        dataIndex: 'custName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      // {
      //   title: '收费年月',
      //   dataIndex: 'feeYm',
      //   align: 'center',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      // },

      {
        title: '业务年月',
        dataIndex: 'busiYm',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '产品',
        dataIndex: 'pdName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      // {
      //   title: '创建时间',
      //   dataIndex: 'creTime',
      //   align: 'center',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      //   onCell: () => ({ style: { textAlign: 'center' } }),
      //   render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
      // },
    ];

    const columnsThree = [
      {
        title: '姓名',
        dataIndex: 'empName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },

      {
        title: '客户名称',
        dataIndex: 'custName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      // {
      //   title: '收费年月',
      //   dataIndex: 'feeYm',
      //   align: 'center',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      //   render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      // },
      {
        title: '金额',
        dataIndex: 'realFeeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '是否符合',
        dataIndex: 'defaultFlagName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '不符合原因',
        dataIndex: 'unnaturalCauseName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 7 },
      },
    };
    const formItemLayoutStyles = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 15 } },
    };
    return (
      <PageHeaderWrapper>
        <Card style={{ position: 'relative' }}>
          <Tabs defaultActiveKey="3" onChange={this.changeTabPane}>
            <TabPane tab="代发工资代报税" key="1">
              <Row>
                <Col xl={{ span: 24 }} lg={{ span: 24 }} sm={{ span: 24 }} xs={{ span: 24 }}>
                  <Row gutter={32}>
                    <Col xl={{ span: 24 }} lg={{ span: 24 }} sm={{ span: 24 }} xs={{ span: 24 }} />
                  </Row>
                  <Row className={styles.table}>
                    <StandardTable
                      selectedRows={selectedRows}
                      selectedRowKeys={selectedRowKeys}
                      loading={loading}
                      data={wageGenerationData}
                      rowKey="key"
                      columns={columns}
                      onSelectRow={this.handleSelectRows}
                      onChange={this.handleStandardTableChange}
                      rowSelection={null}
                    />
                  </Row>
                </Col>
              </Row>
            </TabPane>
            <TabPane tab="一次性收费" key="2">
              <Row>
                <Col xl={{ span: 24 }} lg={{ span: 24 }} sm={{ span: 24 }} xs={{ span: 24 }}>
                  <Row gutter={32}>
                    <Col xl={{ span: 24 }} lg={{ span: 24 }} sm={{ span: 24 }} xs={{ span: 24 }} />
                  </Row>
                  <Row className={styles.table}>
                    <StandardTable
                      selectedRows={selectedRows}
                      selectedRowKeys={selectedRowKeys}
                      loading={loading}
                      data={onceBillData}
                      rowKey="key"
                      columns={columnsTwo}
                      onSelectRow={this.handleSelectRows}
                      onChange={this.handleStandardTableChange}
                      rowSelection={null}
                    />
                  </Row>
                </Col>
              </Row>
            </TabPane>
            <TabPane tab="其它" key="3">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayoutStyles} label="姓名">
                    {getFieldDecorator('empId', {
                      rules: [{ required: false }],
                      initialValue: formFieldsValue.empId,
                    })(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayoutStyles} label="证件号">
                    {getFieldDecorator('cardNo', {
                      rules: [{ required: false }],
                      initialValue: formFieldsValue.cardNo,
                    })(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayoutStyles} label="是否符合">
                    {getFieldDecorator('defaultFlag', {
                      rules: [{ required: false }],
                      initialValue: formFieldsValue.defaultFlag,
                    })(
                      <Select
                        placeholder="请选择"
                        style={{ width: '100%' }}
                        onChange={this.handleSizeChange}
                      >
                        <Option key="0">全部</Option>
                        <Option key="1">符合</Option>
                        <Option key="2">不符合</Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                {String(isdefaultFlag) === '2' ? (
                  <Col md={8} sm={24}>
                    <FormItem {...formItemLayoutStyles} label="不符合原因">
                      {getFieldDecorator('unnaturalCause', {
                        rules: [{ required: false }],
                        initialValue: formFieldsValue.unnaturalCause || undefined,
                      })(
                        <Select placeholder="请选择" style={{ width: '100%' }} allowClear>
                          {BILL_UN_CAUSE.map(item => (
                            <Option key={item.itemCode}>{item.itemName}</Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                ) : (
                  <Col md={8} sm={24} />
                )}
                <Col md={8} sm={24} />
                <Col md={7} sm={24}>
                  <div style={{ overflow: 'hidden' }}>
                    <span style={{ float: 'right', marginBottom: 16 }}>
                      <Button type="primary" onClick={this.searchList}>
                        查询
                      </Button>
                    </span>
                  </div>
                </Col>
              </Row>
              <div style={{ width: '100%', marginBottom: 16 }}>
                <Button type="primary" onClick={() => this.export()}>
                  导出
                </Button>
              </div>
              <div style={{ width: '100%', float: 'left' }}>
                <Alert
                  message={
                    <Fragment>
                      此页签包含除代发工资代报税和一次性费用之外的所有费用，例如社保、公积金和服务费等
                    </Fragment>
                  }
                  type="info"
                  showIcon
                />
              </div>
              <Row>
                <Col xl={{ span: 24 }} lg={{ span: 24 }} sm={{ span: 24 }} xs={{ span: 24 }}>
                  <Row gutter={32}>
                    <Col xl={{ span: 24 }} lg={{ span: 24 }} sm={{ span: 24 }} xs={{ span: 24 }} />
                  </Row>
                  <Row className={styles.table}>
                    <StandardTable
                      selectedRows={selectedRows}
                      selectedRowKeys={selectedRowKeys}
                      loading={loading}
                      data={noBillData}
                      rowKey="key"
                      columns={columnsThree}
                      onSelectRow={this.handleSelectRows}
                      onChange={this.handleStandardTableChange}
                    />
                  </Row>
                </Col>
              </Row>
            </TabPane>
          </Tabs>
        </Card>
        <Modal
          title="选择生成账单的数据范围"
          visible={modalVisible}
          onOk={this.submitData}
          onCancel={this.closeModalVisible}
          confirmLoading={submitLoading}
          destroyOnClose
        >
          <Form>
            <FormItem {...formItemLayout} label="选择不符合条件的数据">
              <Radio.Group value={noFic} onChange={this.changeTaxes}>
                <Radio key={0} value={0}>
                  否
                </Radio>
                <Radio key={1} value={1}>
                  是
                </Radio>
              </Radio.Group>
            </FormItem>
            {+noFic === 1 ? (
              <FormItem wrapperCol={{ md: { span: 19 }, offset: 2 }}>
                {getFieldDecorator('incomPro', {
                  rules: [{ required: true, message: '请选择' }],
                })(
                  <Checkbox.Group>
                    {BILL_UN_CAUSE.map(item => (
                      <Checkbox key={item.itemCode} value={item.itemCode}>
                        {item.itemName}
                      </Checkbox>
                    ))}
                  </Checkbox.Group>
                )}
              </FormItem>
            ) : null}
            <span style={{ color: '#ccc', marginLeft: '30px' }}>
              说明 ：符合条件的数据会默认生成账单；不符合条件的数据可选择不符合条件是否生成。
            </span>
          </Form>
        </Modal>
        <TaskProgress
          progressVisible={customerbillcs.showProgress}
          progressPercent={customerbillcs.progressPercent || 0}
          isShowResult={customerbillcs.progressPercent === 100}
          resultInfo={customerbillcs.resultInfo}
          checkHasTask={this.checkHasTask}
          handleProgressModalVisible={this.handleProgressModalVisible}
          closeModalCallBack={() => {
            if (+customerbillcs.progressPercent === 100) {
              router.push('/chargemanage/customerbilling/index');
            }
          }}
        />
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.goBack} style={{ marginRight: 10 }}>
            关闭
          </Button>
          <Button
            type="primary"
            onClick={() => {
              this.submitData();
            }}
          >
            生成账单
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
const billingListform = Form.create()(billingList);
export default billingListform;
